<template>
	<view class="my-page">
		<view class="header">
			<h2>我的</h2>
			<uni-icons type="mail-open" size="25" class="mail-icon"></uni-icons>
		</view>
		<view class="my-name">
			<h3 class="name">辣妈007007</h3>
			<uni-icons type="compose" size="20" class="compose-icon"></uni-icons>
		</view>
		<view class="my-baby">
			<button class="sign-button" ><text>2个月&nbsp;男宝</text></button>&nbsp;&nbsp;&nbsp;
			<button class="sign-button" ><text>1年&nbsp;女宝</text></button>				
		</view>
		<view class="my-first-option">
			<view class="my-option">
				<uni-icons type="person" size="40" class="contact-icon" color="#aaaaff"></uni-icons>
				<view class="my-option-name">&nbsp;&nbsp;宝宝管理</view>
				<uni-icons type="right" size="30" class="right-icon" color="#cccccc"></uni-icons>
			</view>
			<view class="my-option">
				<uni-icons type="calendar" size="40" class="contact-icon" color="#aaaaff"></uni-icons>
				<view class="my-option-name">&nbsp;&nbsp;知识收藏</view>
				<uni-icons type="right" size="30" class="right-icon" color="#cccccc"></uni-icons>
			</view>
			<view class="my-option">
				<uni-icons type="wallet" size="40" class="contact-icon" color="#aaaaff"></uni-icons>
				<view class="my-option-name">&nbsp;&nbsp;菜谱收藏</view>
				<uni-icons type="right" size="30" class="right-icon" color="#cccccc"></uni-icons>
			</view>
		</view>
			
		<view class="my-first-option">
			<view class="my-option">
				<uni-icons type="staff" size="40" class="contact-icon" color="#aaaaff"></uni-icons>
				<view class="my-option-name">&nbsp;&nbsp;推荐给好友</view>
				<uni-icons type="right" size="30" class="right-icon" color="#cccccc"></uni-icons>
			</view>
		</view>
		
		<view class="my-first-option">
			<view class="my-option">
				<uni-icons type="phone" size="40" class="contact-icon" color="#aaaaff"></uni-icons>
				<view class="my-option-name">&nbsp;&nbsp;关于康宝宝</view>
				<uni-icons type="right" size="30" class="right-icon" color="#cccccc"></uni-icons>
			</view>
			<view class="my-option">
				<uni-icons type="gear" size="40" class="contact-icon" color="#aaaaff"></uni-icons>
				<view class="my-option-name">&nbsp;&nbsp;设置</view>
				<uni-icons type="right" size="30" class="right-icon" color="#cccccc"></uni-icons>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	
</script>

<style scoped>
.my-page{
	background-image:linear-gradient(to bottom ,#d9d9d9,#fff);
}
.header {
	/* background-color: #fff; */
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	padding: 18rpx 20rpx;
	/* border-bottom: 2rpx solid #F5F5F5; */
}	
.my-name{
	display: flex;
	justify-content: flex-start;
	margin-top: 48rpx;
	margin-left: 30rpx;
	margin-bottom: 35rpx;
}
.compose-icon{

}
.my-baby{
	display: flex;
	justify-content: flex-start;
	margin-left: 30rpx;
	margin-bottom: 68rpx;
}
.my-first-option{
	box-shadow: 0rpx 0rpx 4rpx rgb(170, 170, 127);
	margin: 30rpx 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
}

.my-option{
	display: flex;
	justify-content: flex-start;
	padding: 20rpx 0 20rpx 20rpx;
	border-bottom: 4rpx solid #f2f2f2;
}
.my-option-name{
	font-size: 33rpx;
	display: flex;
	align-items: center;
}
.right-icon{
	margin-left: auto;
	display: flex;
	align-items: center;
}
.sign-button {
	width: 100px;
	height: 30px;
	line-height: 60rpx;
	font-size: 14px;
	/* color: #666EE8; */
	background-color: #ffffff;
	border-color: #fff;
	border-radius: 50rpx;
	margin: 0;
	padding: 0;
	/* text-align: center; */
}   

</style>
